<template>
    <div id="purchase-wraper" >
        <div v-if="loaded">
            <!--banner图-->
            <div class="purchase-header">
                <!--1张banner图-->
                <a href="javascript:void(0);" @click="dolog('Banner',0)" v-if="Object.keys(bannerLists).length == 1">
                    <img :src="bannerLists[0].img" alt="" :onerror="errorBannerImg">
                </a>
                <!--多张banner图-->
                <swiper :options="swiperOption" ref="bannerSwiper" v-else>
                    <swiper-slide class="swiper-slide games" id="banner-slide" v-for="(item,index) in bannerLists" :key="index">
                        <a href="javascript:void(0);" @click="dolog('Banner',index)">
                            <img :src="item.img" alt="" :onerror="errorBannerImg">
                        </a>
                    </swiper-slide>
                    <div class="swiper-pagination" id="banner-pagination" slot="pagination"></div>
                </swiper>
            </div>

            <!--选择开抢时间-->
            <div class="selectOptions">
                <swiper :options="selectOption" ref="selectSwiper">
                    <swiper-slide class="swiper-slide games" :class="{ chosen: index==current && !isCheck }" v-for="(item,index) in zeroBuyList" :key="index">
                        <div @click="chooseOption(index,item[0].onlinetime,item[0].offlinetime)">
                            <p>{{selectLists[index]}}</p>
                            <p v-if="item[0].onlinetime > nowtamp">
                                开抢
                            </p>
                            <p v-else-if="item[0].offlinetime < nowtamp">
                                已结束
                            </p>
                            <p v-else-if="item[0].onlinetime <= nowtamp && nowtamp <= item[0].offlinetime">
                                火爆开抢中
                            </p>
                        </div>
                    </swiper-slide>
                    <swiper-slide class="swiper-slide games" :class="{chosen : isCheck}">
                        <div @click="check()">领取记录</div>
                    </swiper-slide>
                </swiper>
            </div>
            <!--领取记录-->
            <div class="check-content" v-if="isCheck">
                <p v-if="recordList == ''" class="empty">
                    暂无领取记录
                </p>
                <ul id="recordLists" v-else>
                    <li v-for="(item,index) in recordList" :key="index">
                        <!--已过期没填地址的实物商品-->
                        <a href="javascript:void(0);" v-if="item.isEnd == 1 && item.payStatus == 1 && item.ifaddr == 1">
                            <div class="recordLeft">
                                <p>
                                    <img class="gray" :src="item.topicImage" alt="" :onerror="errorImg">
                                </p>
                            </div>
                            <div class="recordCenter">
                                <p class="name">{{item.name}}</p>
                                <p class="tags">{{item.description}}</p>
                            </div>
                            <div class="recordRight">
                                <a href="javascript:void(0);" class="gray">已过期</a>
                            </div>
                        </a>
                        <!--已过期填了地址的实物商品-->
                        <a :href="item.url" v-if="item.isEnd == 1 && item.payStatus == 2 && item.ifaddr == 1">
                            <div class="recordLeft">
                                <p>
                                    <img class="gray" :src="item.topicImage" alt="" :onerror="errorImg">
                                </p>
                            </div>
                            <div class="recordCenter">
                                <p class="name">{{item.name}}</p>
                                <p class="tags">{{item.description}}</p>
                            </div>
                            <div class="recordRight">
                                <a href="item.url" class="gray">已过期</a>
                            </div>
                        </a>
                        <!--已过期不需要填地址的虚拟商品-->
                        <a :href="item.url" v-if="item.isEnd == 1 && item.payStatus == 2 && item.ifaddr == 1">
                            <div class="recordLeft">
                                <p>
                                    <img class="gray" :src="item.topicImage" alt="" :onerror="errorImg">
                                </p>
                            </div>
                            <div class="recordCenter">
                                <p class="name">{{item.name}}</p>
                                <p class="tags">{{item.description}}</p>
                            </div>
                            <div class="recordRight">
                                <a :href="item.url" class="gray">已过期</a>
                            </div>
                        </a>
                        <!--未过期不需要填地址的虚拟商品-->
                        <a :href="item.url" v-if="item.isEnd == 0 && item.payStatus == 2 && item.ifaddr == 0">
                            <div class="recordLeft">
                                <p>
                                    <img :src="item.topicImage" alt="" :onerror="errorImg">
                                </p>
                            </div>
                            <div class="recordCenter">
                                <p class="name">{{item.name}}</p>
                                <p class="tags">{{item.description}}</p>
                            </div>
                            <div class="recordRight">
                                <a :href="item.url">查看</a>
                            </div>
                        </a>
                        <!--未过期需要填地址但还未填地址的实物商品-->
                        <a href="javascript:void(0);" v-if="item.isEnd == 0 && item.payStatus == 1 && item.ifaddr == 1">
                            <div class="recordLeft">
                                <p>
                                    <img :src="item.topicImage" alt="" :onerror="errorImg">
                                </p>
                            </div>
                            <div class="recordCenter">
                                <p class="name">{{item.name}}</p>
                                <p class="tags">{{item.description}}</p>
                            </div>
                            <div class="recordRight">
                                <a href="javascript:void(0);" @click="setSuccessInfo(current,index,listBol)">填地址</a>
                            </div>
                        </a>
                        <!--未过期需要填地址且已填地址的实物商品-->
                        <a :href="item.url" v-if="item.isEnd == 0 && item.payStatus == 2 && item.ifaddr == 1">
                            <div class="recordLeft">
                                <p>
                                    <img :src="item.topicImage" alt="" :onerror="errorImg">
                                </p>
                            </div>
                            <div class="recordCenter">
                                <p class="name">{{item.name}}</p>
                                <p class="tags">{{item.description}}</p>
                            </div>
                            <div class="recordRight">
                                <a :href="item.url">查看</a>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
            <!--抢购商品列表-->
            <div class="purchase-content" v-else>
                <div class="container" v-for="(item,index) in zeroBuyList[current]" :key="index">
                    <p class="top"></p>
                    <div>
                        <div class="left">
                            <p>
                                <img :src="item.topicImage" alt="" :onerror="errorImg">
                            </p>
                        </div>
                        <div class="right">
                            <p class="name">{{item.name}}</p>
                            <p class="price">开抢价： &nbsp;<a>￥</a><span>{{item.price}}</span></p>
                            <p class="originalPrice">原价：￥{{item.originalPrice}}</p>
                            <p class="buyButton" v-if="nowtamp > item.offlinetime">
                                <span v-if="item.orderStatus == 0">处理中...</span>
                                <a :href="item.url" v-else-if="item.orderStatus == 1">查看</a>
                                <span v-else-if="item.orderStatus == 2">{{item.msg}}</span>
                                <a :href="item.url" v-else-if="item.orderStatus == 3">查看</a>
                                <a href="javascript:void(0);" v-else-if="item.orderStatus == 4" @click="setSuccessInfo(current,index,listBol)">查看商品详情</a>
                                <span v-else>本场已结束</span>
                            </p>
                            <p class="buyButton" style="background-color: #ff4102;" @click="showCode(item.platformProductId,current,index)" v-else-if="(item.onlinetime <= nowtamp && nowtamp <= item.offlinetime && item.orderStatus == -1 && item.kuCun > 0)">
                                <img src="../assets/img/6.png" alt="" class="click">
                                <span>点我开抢</span>
                            </p>
                            <p class="buyButton" style="background-color: #ff4102;" v-else-if="(item.onlinetime <= nowtamp && nowtamp <= item.offlinetime && item.kuCun > 0)">
                                <span v-if="item.orderStatus == 0">处理中...</span>
                                <a :href="item.url" v-else-if="item.orderStatus == 1">查看</a>
                                <span v-else-if="item.orderStatus == 2">{{item.msg}}</span>
                                <a :href="item.url" v-else-if="item.orderStatus == 3">查看</a>
                                <a href="javascript:void(0);" v-else-if="item.orderStatus == 4" @click="setSuccessInfo(current,index,listBol)">查看商品详情</a>
                            </p>
                            <p class="buyButton" v-else-if="(item.onlinetime <= nowtamp && nowtamp <= item.offlinetime && item.kuCun <= 0 && item.orderStatus == -1)">

                                <a href="javascript:void(0);">已抢完</a>
                            </p>
                            <p class="buyButton" style="background-color: #ff4102;" v-else-if="nowtamp < item.onlinetime">
                                <img src="../assets/img/clock.png" alt="" class="clock">
                                <span>{{leftTime}}</span>
                                开抢
                            </p>
                        </div>
                    </div>
                    <div v-if="nowtamp <= item.offlinetime">
                        <div class="purchase-bottom">
                            <div class="kucun" :style="'width:'+ ((item.kuCun / item.total) * 100) +'%;'">{{item.kuCun}}件</div>
                        </div>
                        <div class="triangle_border_down"></div>
                        <p class="leftNum">剩余数量</p>
                    </div>
                </div>
                <div class="scrollUl" v-if="successUsers != ''">
                    <ul>
                        <swiper :options="scrollSwiperOption" ref="scrollSwiper" v-if="successUsers.length >= 1">
                            <swiper-slide class="swiper-slide games swiper-no-swiping" id="scroll-swiper-list" v-for="(item,index) in successUsers" :key="index">
                                <a href="javascript:void(0);">
                                    {{ item.tel | hideMiddle }} 抢到了 {{ item.name }}
                                </a>
                            </swiper-slide>
                        </swiper>
                    </ul>
                </div>
            </div>
            <div id="code-wraper" v-show="codeBol">
                <img src="../assets/img/close.png" alt="" class="close" @click="codeBol = !codeBol">
                <div class="code-container">
                    <input type="tel" v-model="code" class="input" maxlength="2">
                    <div></div>
                    <img :src="codeImg" alt="">
                    <p @click="changeImg()" class="change">
                        <span>换一张</span>
                        <img src="../assets/img/reload.png" alt="">
                    </p>
                    <p v-if="isNext" @click="buy(buyInfo.id,buyInfo.current,buyInfo.index)" class="next">下一步</p>
                    <p v-else class="next">下一步</p>
                </div>
            </div>
        </div>
        <loading-box :message="loadingList" v-if="loadingList.show"></loading-box>
        <div class="success-container" v-if='successBol'>
            <img src="../assets/img/close.png" alt="" id="close" @click="successBol = false">
            <div class="success-body">
                <!--成功的弹框-->
                <img src="../assets/img/ztipbg.png" alt="">
                <div>获得{{successInfo.name}}</div>
                <p class="address" @click="getAddress(listBol)">填写收货地址</p>
                <p class="get" v-if="ifFillAdd">
                    <a :href="successInfo.url">
                        领取
                    </a>
                </p>
                <p class="get" style="background-color: gray" v-else>领取</p>
            </div>
        </div>
    </div>
</template>
<script>
    import loading from './public/loading'
    import wx from 'weixin-js-sdk'
    export default {
        name: "Purchase",
        components: {
            'loading-box': loading
        },
        metaInfo: {
            title: '0元抢购'
        },
        data (){
            return {
                sid: '',
                api: "",  //api接口
                isNoFirst: 0, //是否第一次填该商品地址
                isNext: true,
                listBol: false,  //是否是在领取记录中点击填写收货地址
                successBol: false, //是否显示需要填地址的成功弹窗
                successInfo:{},  //需要填地址的商品信息
                codeNum: 1,
                code: '',
                codeBol: false,
                isCheck:false,
                second: '', //剩余时间戳
                leftTime:'',  //剩余时间
                errorImg: 'this.src="' + require('../assets/img/error2.png') + '"',  //秒杀占位图
                errorBannerImg: 'this.src="' + require('../assets/img/placeholder640x300.png') + '"',  //banner图占位图
                loaded:'',  //页面是否加载完毕
                platcode:'ZHWZ',   //平台code
                route: '',
                current:1,   //进来页面显示哪个0元购tab
                idx:1, //
                currentList: [],  //
                nowtamp: '',    //当前的时间戳
                starttamp: '',  //开始时间戳
                bannerLists:[],  //banner图
                selectLists: [],  //0元购tab内容
                zeroBuyList:[],   //0元购列表
                recordList: [],   //领取列表
                successUsers: [],  //幸运滚动列表
                timer: null,  //倒计时定时器
                timer1: null,  //验证码下一步延时器
                checkNum: 0,  // 轮询次数
                checkTimer: null,  // 轮询定时器
                codeImg: '',  //验证码图片
                ifFillAdd: false,  //弹框中是否填写地址，领取按钮如何显示问题
                loadingList:{
                    msg:'',
                    show:''
                },
                buyInfo:{
                    id: '',
                    current: '',
                    index: ''
                },
                refreshArr:[],  //需要查询的抢购订单
                listAddr:[],   //列表中填好地址，刷新tab中的状态
                // canBuy: false,  //能否抢购
                swiperOption: {
                    //banner图滑动
                    autoplay: {
                        disableOnInteraction: false, //用户操作后是否禁止自动循环
                        delay: 3000 //自自动循环时间
                    }, //可选选项，自动滑动
                    speed: 400, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
                    loop: true, //循环切换
                    grabCursor: true, //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
                    // setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
                    autoHeight: true,   //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
                    scrollbar: '.swiper-scrollbar',
                    mousewheelControl: true, //设置为true时，能使用鼠标滚轮控制slide滑动
                    observeParents: true, //当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
                    lazyLoadingInPrevNext: true,
                    pagination: {
                        el: '#banner-pagination',
                        type : 'bullets', //分页器形状
                        clickable: true, //点击分页器的指示点分页器会控制Swiper切换
                    }
                },
                selectOption: {
                    initialSlide :2,
                    speed: 400, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
                    loop: false, //循环切换
                    grabCursor: true, //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
                    // setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
                    autoHeight: true,   //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
                    scrollbar: '.swiper-scrollbar',
                    mousewheelControl: true, //设置为true时，能使用鼠标滚轮控制slide滑动
                    observeParents: true, //当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
                    lazyLoadingInPrevNext: true,
                    slidesPerView: 4.5,
                    spaceBetween:8
                },
                scrollSwiperOption:{
                    //跑马灯swiper
                    autoplay: {
                        disableOnInteraction: false, //用户操作后是否禁止自动循环
                        delay: 4000 //自自动循环时间
                    }, //可选选项，自动滑动
                    speed: 400, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
                    loop: true, //循环切换
                    grabCursor: true, //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
                    // setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
                    autoHeight: true,   //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
                    scrollbar: '.swiper-scrollbar',
                    mousewheelControl: true, //设置为true时，能使用鼠标滚轮控制slide滑动
                    observeParents: true, //当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
                    direction: 'vertical'  //滚动方向
                }
            }
        },
        mounted (){
            let _this = this;
            _this.loaded = false;
            _this.isNoFirst = 0;
            _this.platcode = _this.getParamString('platcode');
            _this.route = _this.getParamString('route');
            _this.sid = window.sessionStorage.getItem('sid');
            _this.loadingList = {
                msg: '加载中...',
                show: true,
            };
            _this.getData();
        },
        methods: {
            setSuccessInfo(current,index,bol){
                let _this = this;
                _this.isNoFirst = 0;
                _this.ifFillAdd = false;
                _this.current = current;
                _this.idx = index;
                _this.successBol = true;
                if (bol){
                    _this.successInfo = _this.recordList[index];
                }else{
                    _this.successInfo = _this.zeroBuyList[current][index];
                }

                console.log(_this.successInfo);
                console.log(_this.current);
                console.log(_this.idx);
            },
            getAddress(bol){
                let _this = this;
                wx.openAddress({
                    success (result){
                        let data = {
                            tel: result.telNumber,
                            name: result.userName,
                            province: result.provinceName,
                            city: result.cityName,
                            area: result.countryName,
                            address: result.detailInfo,
                            orderId: _this.successInfo.orderId,
                            platformProductId: _this.successInfo.platformProductId,
                            isNoFirst: _this.isNoFirst,
                            zwtoken: _this.sid
                        };
                        _this.$http.getAxio(0,process.env.API_HOST+_this.$http.urlHead+'zero_buy/setAddrInfo/platcode/'+_this.platcode, 'POST', _this.$qs.stringify(data))
                            .then(res => {

                                if (res.status == 0){
                                    //    填写成功
                                    if (bol){
                                        _this.recordList[_this.idx].url = res.url;
                                        _this.recordList[_this.idx].payStatus = 2;
                                        _this.listAddr = _this.listAddr.concat(_this.recordList[_this.idx].platformProductId);
                                    }else{
                                        _this.zeroBuyList[_this.current][_this.idx].orderStatus = 3;
                                        _this.zeroBuyList[_this.current][_this.idx].url = res.url;
                                    }
                                    _this.successInfo.url = res.url;
                                    _this.ifFillAdd = true;
                                    _this.isNoFirst = 1;
                                    // _this.successBol = false;
                                }else{
                                    //填写失败
                                    _this.showMsgbox(res.msg);
                                }
                            });
                    },
                    cancel (result){
                        //取消填写
                        console.log('取消填写收货地址');
                    }
                });
            },
            stopBuy(state){
                let _this = this;
                _this.loadingList = {
                    msg: '插队抢购中...',
                    show: false,
                    cancelBol: true
                };
                _this.queryStatus(state);
                clearInterval(_this.checkTimer);
            },
            showMsgbox(msg){
                //弹框函数
                this.$msgbox({
                    content:msg,
                    className:'pop-custom'
                });
            },
            popMsg(msg,status){
                //抢购弹框函数
                this.$tipsMsgBox({
                    content:msg,
                    className:'pop-custom',
                    status: status
                });
            },
            getInfo(index){
                let _this = this;
                let arr = [];
                for (var i in _this.zeroBuyList[_this.current]){
                    arr.push(_this.zeroBuyList[_this.current][i].platformProductId);
                };
                let arrStr = arr.join(",");
                var keyCode = 'index'+parseInt(_this.current+1, 10);
                let uid = _this.getParamString("userId");
                if (uid){
                    let data = {
                        uid: uid,
                        platcode: _this.platcode,
                        action: 'ZeroBuy/TimeStatus/ClickCount/',
                        content: '点击',
                        details: keyCode,
                        zwtoken: _this.sid
                    };

                    let jsonData = {
                        platformProductIds: arrStr,
                        zwtoken: _this.sid
                    };

                    _this.$http.getAxio(1,process.env.API_HOST+_this.$http.urlHead+'zero_buy/getKuncunAndUserStatus/platcode/'+_this.platcode, 'POST', jsonData)
                        .then(res => {
                            if (res.status == 0){

                                if (res.zeroBuyList){
                                    if (res.zeroBuyList.length > 1){
                                        for (var i in _this.zeroBuyList[_this.current]){
                                            _this.zeroBuyList[_this.current][i].url = res.zeroBuyList[i].url;
                                            _this.zeroBuyList[_this.current][i].kuCun = res.zeroBuyList[i].leftCount;
                                            _this.zeroBuyList[_this.current][i].orderStatus = res.zeroBuyList[i].orderStatus;
                                        }
                                    }else if(res.zeroBuyList.length == 1){
                                        _this.zeroBuyList[_this.current][0].url = res.zeroBuyList[0].url;
                                        _this.zeroBuyList[_this.current][0].kuCun = res.zeroBuyList[0].leftCount;
                                        _this.zeroBuyList[_this.current][0].orderStatus = res.zeroBuyList[0].orderStatus;
                                    }
                                }
                                _this.nowtamp = res.timeStamp;

                                _this.$http.getAxio(0,process.env.API_HOST+'/cYouHuiZhongXin/fastapi/dolog1.php', 'POST', _this.$qs.stringify(data))
                                    .then(res => {
                                        if (res.status == 0){

                                        }
                                    });

                            }
                        });



                }else{
                    let data1 = '[{"action": "ZeroBuy/TimeStatus/ClickCount/","data": {'+keyCode+': 1,}}]';

                    let data2 = eval('(' + data1 + ')');
                    let jsonData = {
                        platformProductIds: arrStr,
                        data: data2,
                        zwtoken: _this.sid
                    };
                    _this.$http.getAxio(1,process.env.API_HOST+_this.$http.urlHead+'zero_buy/getKuncunAndUserStatus/platcode/'+_this.platcode, 'POST', jsonData)
                        .then(res => {
                            if (res.status == 0){
                                // _this.zeroBuyList[_this.current] = res.zeroBuyList;
                                if (res.zeroBuyList){
                                    if (res.zeroBuyList.length > 1){
                                        for (var i in _this.zeroBuyList[_this.current]){
                                            _this.zeroBuyList[_this.current][i].url = res.zeroBuyList[i].url;
                                            _this.zeroBuyList[_this.current][i].kuCun = res.zeroBuyList[i].leftCount;
                                            _this.zeroBuyList[_this.current][i].orderStatus = res.zeroBuyList[i].orderStatus;
                                        }
                                    }else if(res.zeroBuyList.length == 1){
                                        _this.zeroBuyList[_this.current][0].url = res.zeroBuyList[0].url;
                                        _this.zeroBuyList[_this.current][0].kuCun = res.zeroBuyList[0].leftCount;
                                        _this.zeroBuyList[_this.current][0].orderStatus = res.zeroBuyList[0].orderStatus;
                                    }
                                }
                                _this.nowtamp = res.timeStamp;
                            }
                        });
                }

            },
            //首页数据
            getData (){
                let _this = this;
                _this.platcode = _this.getParamString('platcode');
                let data = {
                    platcode:_this.platcode,
                    zwtoken: _this.sid
                };

                if (_this.route == 'fast'){
                    let timestamp = parseInt(new Date().getTime() / 60000 , 10);
                    _this.api = process.env.RESOURCE_HOST+'/cYouHuiZhongXin/public/api.php/index/zero_buy/index/platcode/'+_this.platcode+"/time/"+timestamp;
                    _this.$http.getAxio(0,_this.api, 'GET')
                        .then(res => {
                            if (res.status == 0){
                                _this.nowtamp = res.timeStamp;
                                _this.bannerLists = res.banner;
                                // console.log(Object.keys(_this.bannerLists).length);
                                if (res.zeroBuyList == ''){
                                    //    没有抢购商品

                                }else{
                                    //有抢购商品
                                    // _this.nowtamp = res.timeStamp;
                                    // _this.bannerLists = res.banner;
                                    _this.zeroBuyList = res.zeroBuyList;
                                    _this.current = _this.zeroBuyList.length;
                                    for (var i in _this.zeroBuyList){
                                        let timeNode = _this.timestampToTime(_this.zeroBuyList[i][0].onlinetime,_this.nowtamp);
                                        _this.selectLists.push(timeNode);
                                        if (i <= _this.zeroBuyList.length-1){
                                            if (_this.zeroBuyList[i][0].onlinetime <= _this.nowtamp && _this.nowtamp <= _this.zeroBuyList[i][0].offlinetime || _this.zeroBuyList[i][0].onlinetime > _this.nowtamp){
                                                //抢购时间区间中
                                                _this.currentList.push(i);
                                                _this.starttamp = _this.zeroBuyList[i][0].onlinetime;
                                            }
                                        }else{
                                            _this.currentList.push(i);
                                            _this.starttamp = _this.zeroBuyList[i][0].onlinetime;
                                        }
                                        for (var j in _this.zeroBuyList[i]){
                                            if (_this.zeroBuyList[i][j].orderStatus == 0){
                                                _this.refreshArr[_this.zeroBuyList[i][j].platformProductId] = {
                                                    current: i,
                                                    index: j,
                                                    productId: _this.zeroBuyList[i][j].productId,
                                                    verification: _this.zeroBuyList[i][j].verification,
                                                    ifaddr: _this.zeroBuyList[i][j].ifaddr
                                                };
                                                _this.loadingList = {
                                                    msg: '插队抢购中...',
                                                    show: true,
                                                    cancelBol: true  //是否需要取消按钮
                                                };
                                            }
                                        }
                                    }
                                    //数组排序  由小到大
                                    _this.currentList.sort(function (a,b){
                                        return a-b;
                                    });
                                    _this.current = _this.currentList[0];  //取最小值
                                    _this.starttamp = _this.zeroBuyList[_this.current][0].onlinetime;
                                    _this.getScrollLists();
                                    _this.countDown();
                                    console.log(_this.current);
                                    _this.selectOption.initialSlide = _this.current;
                                    _this.getInfo();
                                }
                                _this.checkBuyStatus();   //轮询
                                _this.loaded = true;
                                _this.loadingList = {
                                    msg: '',
                                    show: false
                                };
                            }else if(res.status == -99){
                                _this.showMsgbox(res.msg);
                            }
                        });
                }else{
                    _this.api = process.env.API_HOST+_this.$http.urlHead+'zero_buy/index/platcode/'+_this.platcode;
                    _this.$http.getAxio(0,_this.api, 'POST', _this.$qs.stringify(data))
                        .then(res => {
                            if (res.status == 0){
                                _this.nowtamp = res.timeStamp;
                                _this.bannerLists = res.banner;
                                // console.log(Object.keys(_this.bannerLists).length);
                                if (res.zeroBuyList == ''){
                                    //    没有抢购商品

                                }else{
                                    //有抢购商品
                                    // _this.nowtamp = res.timeStamp;
                                    // _this.bannerLists = res.banner;
                                    _this.zeroBuyList = res.zeroBuyList;
                                    _this.current = _this.zeroBuyList.length;
                                    for (var i in _this.zeroBuyList){
                                        let timeNode = _this.timestampToTime(_this.zeroBuyList[i][0].onlinetime,_this.nowtamp);
                                        _this.selectLists.push(timeNode);
                                        if (i <= _this.zeroBuyList.length-1){
                                            if (_this.zeroBuyList[i][0].onlinetime <= _this.nowtamp && _this.nowtamp <= _this.zeroBuyList[i][0].offlinetime || _this.zeroBuyList[i][0].onlinetime > _this.nowtamp){
                                                //抢购时间区间中
                                                _this.currentList.push(i);
                                                _this.starttamp = _this.zeroBuyList[i][0].onlinetime;
                                            }
                                        }else{
                                            _this.currentList.push(i);
                                            _this.starttamp = _this.zeroBuyList[i][0].onlinetime;
                                        }
                                        for (var j in _this.zeroBuyList[i]){
                                            if (_this.zeroBuyList[i][j].orderStatus == 0){
                                                _this.refreshArr[_this.zeroBuyList[i][j].platformProductId] = {
                                                    current: i,
                                                    index: j,
                                                    productId: _this.zeroBuyList[i][j].productId,
                                                    verification: _this.zeroBuyList[i][j].verification,
                                                    ifaddr: _this.zeroBuyList[i][j].ifaddr
                                                };
                                                _this.loadingList = {
                                                    msg: '插队抢购中...',
                                                    show: true,
                                                    cancelBol: true  //是否需要取消按钮
                                                };
                                            }
                                        }
                                    }
                                    //数组排序  由小到大
                                    _this.currentList.sort(function (a,b){
                                        return a-b;
                                    });
                                    _this.current = _this.currentList[0];  //取最小值
                                    _this.starttamp = _this.zeroBuyList[_this.current][0].onlinetime;
                                    _this.getScrollLists();
                                    _this.countDown();
                                    console.log(_this.current);
                                    _this.selectOption.initialSlide = _this.current;
                                    _this.getInfo();
                                }
                                _this.checkBuyStatus();   //轮询
                                _this.loaded = true;
                                _this.loadingList = {
                                    msg: '',
                                    show: false
                                };
                            }else if(res.status == -99){
                                _this.showMsgbox(res.msg);
                            }
                        });
                }

            },
            //幸运列表，跑马灯
            getScrollLists (){
                let _this = this;
                _this.successUsers = [];
                for (var j in _this.zeroBuyList[_this.current]){
                    if (_this.zeroBuyList[_this.current][j].successUser){
                        if (_this.zeroBuyList[_this.current][j].successUser != ''){
                            _this.successUsers =_this.successUsers.concat(_this.zeroBuyList[_this.current][j].successUser);
                        }
                    }
                }
            },
            //时间戳转时间
            timestampToTime(timestamp,nowtamp) {

                let date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
                let Y = date.getFullYear() + '-';
                let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
                let D = date.getDate() + ' ';
                let h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
                let m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes());
                let s = date.getSeconds();

                //当前时间
                let date1 = new Date(nowtamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
                let D1 = date1.getDate();
                let Y1 = date1.getFullYear();
                let M1 = date1.getMonth()+1;
                if (Y1 > date.getFullYear()){
                    return '昨日'+h+m;
                }else if (Y1 < date.getFullYear()){
                    return '明日'+h+m;
                }else if (Y1 == date.getFullYear()){
                    if (M1 > (date.getMonth()+1)){
                        return '昨日'+h+m;
                    }else if (M1 < (date.getMonth()+1)){
                        return '明日'+h+m;
                    }else if (M1 == (date.getMonth()+1)){
                        if (D1 > date.getDate()){
                            return '昨日'+h+m;
                        }else if (D1 == date.getDate()){
                            return '今日'+h+m;
                        }else{
                            return '明日'+h+m;
                        }
                    }
                }

            },
            //选择tab
            chooseOption (idx,startTime,endTime){
                let _this = this;
                _this.current = idx;
                _this.listBol = false;
                _this.starttamp = startTime;
                _this.isCheck = false;
                if (_this.listAddr != ''){
                    for (var i in _this.zeroBuyList[idx]){
                        for (var j in _this.listAddr){
                            if (_this.zeroBuyList[idx][i].platformProductId == _this.listAddr[j]){
                                _this.zeroBuyList[idx][i].orderStatus = 3;
                            }
                        }
                    }
                }
                _this.clickBol = true;
                _this.getScrollLists();
                clearInterval(_this.timer);
                _this.countDown();
                _this.getInfo(idx);
            },
            //获取url信息
            getParamString(name){
                var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
                if(r!=null)return  unescape(r[2]); return null;
            },
            //抢购倒计时
            countDown() {
                let _this = this;
                if (_this.starttamp <= _this.nowtamp){
                    return false;
                }else{
                    _this.second = parseInt(_this.starttamp - _this.nowtamp, 10);
                    let d = parseInt(_this.second / 60 / 60 / 24, 10);
                    let h = parseInt(_this.second / 60 / 60 % 24, 10) + d*24;
                    let m = parseInt(_this.second / 60 % 60, 10);
                    let s = parseInt(_this.second % 60, 10);
                    _this.leftTime = _this.checkTime(h) + ':' + _this.checkTime(m) + ':' + _this.checkTime(s);
                    _this.timer = setInterval(() => {
                        _this.second--;
                        let d = parseInt(_this.second / 60 / 60 / 24, 10);
                        let h = parseInt(_this.second / 60 / 60 % 24, 10) + d*24;
                        let m = parseInt(_this.second / 60 % 60, 10);
                        let s = parseInt(_this.second % 60, 10);
                        if (h == 0 && m == 0 && s == 0){
                            clearInterval(_this.timer);
                            _this.getData();
                        }
                        _this.leftTime = _this.checkTime(h) + ':' + _this.checkTime(m) + ':' + _this.checkTime(s);
                    },1000);
                }
            },
            //时间格式
            checkTime(i){ //将0-9的数字前面加上0，例1变为01
                if(i<10){
                    i = "0" + i;
                }
                return i;
            },
            //填完验证码后下一步
            buy(id,current,idx){
                //点击抢购按钮(请求)
                let _this = this;
                _this.isNext = false;
                _this.checkNum = 0;
                _this.isNoFirst = 0;
                clearTimeout(_this.timer1);
                let data = {
                    platformProductId:id,
                    code: _this.code,
                    zwtoken: _this.sid
                };
                if (_this.zeroBuyList[current][idx].kuCun <= 0){
                    _this.showMsgbox('已抢光');
                }else{
                    if (_this.code == ''){
                        _this.showMsgbox('请输入验证码');
                        _this.isNext = true;
                    }else{
                        _this.$http.getAxio(0,process.env.API_HOST+_this.$http.urlHead+'zero_buy/verifyCodeSuccessToDoBuy/platcode/'+_this.platcode, 'POST', _this.$qs.stringify(data))
                            .then(res => {

                                if (res.status == 0){
                                    //成功
                                    _this.zeroBuyList[current][idx].orderStatus = 0;   //按钮设置成处理中
                                    _this.codeBol = false;  //验证码弹框消失
                                    // _this.zeroBuyList[current][idx].kuCun = res.leftCount;
                                    _this.refreshArr[_this.zeroBuyList[current][idx].platformProductId] = {
                                        current: current,
                                        index: idx,
                                        productId: _this.zeroBuyList[current][idx].productId,
                                        verification: _this.zeroBuyList[current][idx].verification,
                                        ifaddr: _this.zeroBuyList[current][idx].ifaddr
                                    };
                                    _this.loadingList = {
                                        msg: '插队抢购中...',
                                        show: true,
                                        cancelBol: true  //是否需要取消按钮
                                    };
                                    _this.checkBuyStatus();
                                }else if(res.status == -1){
                                    //   服务器出错(缺少参数)
                                    _this.codeBol = false;  //验证码弹框消失
                                    _this.showMsgbox('服务器繁忙，请稍后再来');
                                }else if(res.status == 1){
                                    //    不在抢购时间范围内
                                    _this.codeBol = false;  //验证码弹框消失
                                    _this.showMsgbox('抢购时间还没到，请稍后再来');
                                }else if(res.status == -2){
                                    //验证码验证失败
                                    _this.changeImg();
                                    _this.showMsgbox('验证码验证失败');
                                }else if (res.status == 2){
                                    //不能二次抢购
                                    _this.codeBol = false;  //验证码弹框消失
                                    _this.showMsgbox('不能二次抢购');
                                }else if(res.status == 3){
                                    //    库存不足
                                    _this.codeBol = false;  //验证码弹框消失
                                    _this.popMsg("已抢光","false");
                                    _this.zeroBuyList[current][idx].kuCun = res.leftCount;
                                }else if(res.status == 4){
                                    //    系统繁忙(消息队列异常)
                                    _this.codeBol = false;  //验证码弹框消失
                                    _this.showMsgbox('当前服务器繁忙，请稍后再试');
                                }else if(res.status == -99){
                                    _this.codeBol = false;  //验证码弹框消失
                                    _this.showMsgbox(res.msg);
                                }
                                _this.timer1 = setTimeout(() => {
                                    _this.isNext = true;
                                },500);

                            });
                    }
                }

            },
            //更换验证码图片
            changeImg(){
                let _this = this;
                _this.codeNum++;
                let data = {
                    zwtoken: _this.sid
                };
                _this.$http.getAxio(0,process.env.API_HOST+_this.$http.urlHead+'zero_buy/getCode/platcode/'+_this.platcode+'/codeNum/'+_this.codeNum, 'POST', _this.$qs.stringify(data))
                    .then(res => {
                        _this.codeImg = res;
                    });
            },
            //显示验证码弹窗
            showCode(id,current,idx){
                //点击抢购按钮(请求)
                let _this = this;
                _this.code = '';
                _this.changeImg();
                _this.buyInfo = {
                    id: id,
                    current: current,
                    index: idx
                };
                _this.codeBol = true;
            },
            //显示领取记录
            check(){

                let _this = this;
                // _this.loadingList = {
                //     msg: '数据加载中...',
                //     show: true
                // };
                let data = {
                    zwtoken: _this.sid
                };
                _this.$http.getAxio(0,process.env.API_HOST+_this.$http.urlHead+'zero_buy/querySuccessRecordList/platcode/'+_this.platcode, 'POST',_this.$qs.stringify(data))
                    .then(res => {
                        if(res.status == 1){
                            //无中奖记录
                            _this.recordList = [];
                            _this.isCheck = true;
                        }else if(res.status == 0){
                            //成功
                            _this.recordList = res.dataList;
                            _this.isCheck = true;
                        }else{
                            _this.showMsgbox(res.msg);
                        }
                        _this.listBol = true;
                        // _this.loadingList = {
                        //     msg: '数据加载完成',
                        //     show: false
                        // };
                    });
            },
            // 取需要轮询的数据组成数组对象
            makeArr (){
                let _this = this;
                for (var i in _this.zeroBuyList){
                    for (var j in _this.zeroBuyList[i]){
                        if (_this.zeroBuyList[i][j].orderStatus == 0){
                            _this.refreshArr[_this.zeroBuyList[i][j].platformProductId] = {
                                current: i,
                                index: j,
                                productId: _this.zeroBuyList[i][j].productId,
                                verification: _this.zeroBuyList[i][j].verification,
                                ifaddr: _this.zeroBuyList[i][j].ifaddr
                            }
                        }
                    }
                }
            },
            // 实时查询状态
            queryStatus (state){
                let _this = this;
                _this.refreshArr = [];
                _this.makeArr();
                if (_this.refreshArr == ''){

                    // _this.stopBuy(state);
                    _this.loadingList = {
                        msg: '抢购成功...',
                        show: false,
                        cancelBol: true
                    };
                    clearInterval(_this.checkTimer);
                    return false;
                }else{
                    for (var key in _this.refreshArr){
                        let data = {
                            platformProductId: key,
                            productId: _this.refreshArr[key].productId,
                            ifaddr: _this.refreshArr[key].ifaddr,
                            verification: _this.refreshArr[key].verification,
                            cancel: state,
                            zwtoken: _this.sid
                        };
                        _this.$http.getAxio(0,process.env.API_HOST+_this.$http.urlHead+'zero_buy/queryIsBuySuccess/platcode/'+_this.platcode, 'POST', _this.$qs.stringify(data))
                            .then(res => {
                                _this.zeroBuyList[_this.refreshArr[key].current][_this.refreshArr[key].index].orderStatus = res.orderStatus;
                                _this.zeroBuyList[_this.refreshArr[key].current][_this.refreshArr[key].index].url = res.url;
                                console.log(res.orderStatus);
                                if (res.orderStatus == 1){
                                    _this.loadingList = {
                                        msg: '抢购成功...',
                                        show: false,
                                        cancelBol: true
                                    };
                                    clearInterval(_this.checkTimer);
                                    _this.zeroBuyList[_this.refreshArr[key].current][_this.refreshArr[key].index].kuCun = parseInt(_this.zeroBuyList[_this.refreshArr[key].current][_this.refreshArr[key].index].kuCun, 10) - 1;
                                    //自动跳转订单详情页

                                    window.location.href = res.url;

                                }else if(res.orderStatus == 4){
                                //    填收货地址
                                    _this.loadingList = {
                                        msg: '抢购成功...',
                                        show: false,
                                        cancelBol: true
                                    };
                                    clearInterval(_this.checkTimer);
                                    _this.zeroBuyList[_this.refreshArr[key].current][_this.refreshArr[key].index].kuCun = parseInt(_this.zeroBuyList[_this.refreshArr[key].current][_this.refreshArr[key].index].kuCun, 10) - 1;
                                    _this.successInfo = _this.zeroBuyList[_this.refreshArr[key].current][_this.refreshArr[key].index];
                                    _this.successInfo.orderId = res.orderId;
                                    _this.current = _this.refreshArr[key].current;
                                    _this.idx = _this.refreshArr[key].index;
                                    _this.successBol = true;
                                }else if (res.orderStatus == -1){
                                    _this.zeroBuyList[_this.refreshArr[key].current][_this.refreshArr[key].index].orderStatus = -1;
                                }
                            });
                    }
                }
            },
            // 轮询 2s一次
            checkBuyStatus (){
                let _this = this;
                clearInterval(_this.checkTimer);
                _this.checkTimer = setInterval(() => {
                    _this.checkNum++;
                    if (_this.checkNum >= 5){
                        _this.showMsgbox("当前抢购人数较多，请稍后再试");
                        _this.stopBuy(1);
                        // clearInterval(_this.checkTimer);
                        return false;
                    }else{
                        _this.queryStatus(0);
                    }
                },2000);
            },
            dolog(name,index){
                let _this = this;
                let keyCode = 'index'+parseInt(index+1,10);
                let data1 = '[{"action": "ZeroBuy/'+name+'/ClickCount/","data": {'+keyCode+': 1,}}]';
                let data2 = eval('(' + data1 + ')');
                let jsonData = {
                    data: data2,
                    platcode: _this.platcode,
                    zwtoken: _this.sid
                };
                let dologUrl=process.env.API_HOST+_this.$http.urlHead+'public_controller/doLogYhzxIndex/platcode/'+_this.platcode;
                if(_this.route == 'fast')
                {
                	dologUrl=process.env.API_HOST+'/cYouHuiZhongXin/fastapi/dolog.php';
                	
                	//let keyCode = 'index'+parseInt(index+1,10);
	                let uid = _this.getParamString("userId");
	                if (uid){
	                    jsonData.uid=uid;
	                    /*jsonData.platform_id=?;
	                    let data = {
	                        uid: uid,
	                        platform_id: _this.platcode,
	                        action: 'ZeroBuy/TimeStatus/ClickCount/',
	                        content: '点击',
	                        details: keyCode
	                    };*/
	                }
                }
                _this.$http.getAxio(1,dologUrl,'POST',jsonData).then(res => {
                    if (res.status == 0){
                        if (name == 'Banner'){
                            if (_this.bannerLists != ''){
                                window.location.href = _this.bannerLists[index].url;
                            }
                        }
                    }
                });
            }
        },
        filters: {
            //隐藏电话号码中间数字
            hideMiddle(val) {
                return `${val.substring(0,3)}****${val.substring(val.length-4)}`
            }
        }
    }
</script>

<style scoped lang="scss">
    #purchase-wraper{
        width: 100%;
        background-color: #fff;
        .purchase-header{
            width: 100%;
            a{
                width: 100%;
                img{
                    width: 100%;
                }
            }
        }
        .selectOptions{
            width: 100%;
            margin-top: 20px;
            .swiper-slide{
                height: 80px;
                background-color: #ccc;
                display: table;
                color: #fff;
                div{
                    display: table-cell;
                    vertical-align: middle;
                    text-align: center;
                    font-size: 20px;
                }
            }
            .chosen{
                background-color: #ff4102;
            }
        }
        .check-content{
            width: 100%;
            .empty{
                text-align: center;
                padding: 20px;
                color: #333;
                font-size: 24px;
            }
            #recordLists{
                width: 100%;
                padding: 20px;
                box-sizing: border-box;
                padding-top: 0px;
                li{
                    width: 100%;
                    padding:20px 0;
                    list-style: none;
                    display: table;
                    margin-bottom: 20px;
                    border-bottom: 2px solid #eee;
                    a{
                        display: inline-block;
                        text-decoration: none;
                    }
                    div{
                        display: table-cell;
                        vertical-align: middle;
                    }
                    .recordLeft{
                        width: 20%;
                        padding-left: 15px;
                        box-sizing: border-box;
                        p{
                            width: 100%;
                            border-radius: 15px;
                            overflow: hidden;
                            img{
                                width: 100%;
                                border-radius: 15px;
                            }
                            .gray {
                                -webkit-filter: grayscale(100%);
                                -moz-filter: grayscale(100%);
                                -ms-filter: grayscale(100%);
                                -o-filter: grayscale(100%);
                                filter: grayscale(100%);
                                filter: gray;
                            }
                        }
                    }
                    .recordCenter{
                        width: 56%;
                        padding-left: 4%;
                        .name{
                            color: #333;
                            font-size: 30px;
                            padding: 5px 0;
                        }
                        .tags{
                            padding: 5px;
                            color: #999;
                            font-size: 26px;
                        }
                    }
                    .recordRight{
                        width: 20%;
                        text-align: center;
                        a{
                            display: table-cell;
                            vertical-align: middle;
                            text-align: center;
                            text-decoration: none;
                            /*width: 100px;*/
                            height: 50px;
                            line-height: 55px;
                            padding: 0 20px;
                            background: linear-gradient(to right bottom, #ff3333, #ff4102);
                            color: #fff;
                            font-size: 24px;
                            border-radius: 6px;
                        }
                        .gray{
                            -webkit-filter: grayscale(100%);
                            -moz-filter: grayscale(100%);
                            -ms-filter: grayscale(100%);
                            -o-filter: grayscale(100%);
                            filter: grayscale(100%);
                            filter: gray;
                            background-color: gray;
                        }
                    }
                }
            }
        }
        .purchase-content{
            width: 100%;
            /*margin-left: 5%;*/
            margin-top: 80px;
            .container{
                width: 100%;
                display: table;
                overflow: hidden;
                padding: 0px 5% 40px;
                box-sizing: border-box;
                .top{
                    width: 100%;
                    margin-bottom: 40px;
                    height: 2px;
                    background-color: #ccc;
                }
                .left{
                    width: 45%;
                    display: table-cell;
                    vertical-align: middle;
                    padding-right: 5%;
                    p{
                        width: 100%;
                        border-radius: 15px;
                        overflow: hidden;
                        img{
                            width: 100%;
                            border-radius:15px;
                        }
                    }
                }
                .right{
                    width: 50%;
                    display: table-cell;
                    vertical-align: middle;
                    .name{
                        font-size: 30px;
                        color: #333;
                    }
                    .price{
                        font-size: 26px;
                        color: #ff4102;
                        position: relative;
                        a{
                            position: absolute;
                            top: 0;
                            left: 95px;
                            font-weight: 700;
                        }
                        span{
                            font-size: 60px;
                            font-weight: 700;
                        }
                    }
                    .originalPrice{
                        font-size: 24px;
                        color: #999;
                    }
                    .buyButton{
                        width: 100%;
                        height: 80px;
                        background-color: #ccc;
                        margin-top: 5px;
                        border-radius: 5px;
                        text-align: center;
                        line-height: 80px;
                        color: #fff;
                        font-size: 34px;
                        position: relative;
                        img{
                            height: 38px;
                            position: relative;
                            top: 3px;
                        }
                        .click{
                            height: 40px;
                            top: 6px;
                        }
                        a{
                            color: #fff;
                            display: inline-block;
                            width: 100%;
                            height: 80px;
                            text-decoration: none;
                        }
                    }
                }
            }
            .purchase-bottom{
                width: 100%;
                height: 30px;
                margin-top: 80px;
                border-radius: 15px;
                background-color: #ccc;
                /*border: 2px solid #ccc;*/
                overflow: hidden;
                box-sizing: border-box;
                .kucun{
                    width: 0px;
                    height: 100%;
                    background: linear-gradient(to right,#ff4102,#ff9900);
                    text-indent: 15px;
                    line-height: 34px;
                    font-size: 24px;
                    color: #fff;
                    text-shadow:3px 0px 0px #ff4102;
                    transition-duration: 0.3s;
                }
            }
            .triangle_border_down{
                width: 0;
                height: 0;
                border-left: 8px solid transparent;
                border-right: 8px solid transparent;
                border-top: 8px solid red;
                position: relative;
                top: -40px;
                left: 15px;
            }
            .leftNum{
                display: inline-block;
                padding: 4px;
                border-radius: 5px;
                background-color: #ff4102;
                font-size: 18px;
                line-height: 22px;
                color: #fff;
                position: relative;
                top: -78px;
                left: 8px;
            }
        }
        .scrollUl{
            width: 100%;
            overflow: hidden;
            padding: 30px 0;
            background-color: #f3f3f3;
            ul{
                width: 84%;
                height: 30px;
                padding: 3px 0;
                margin-left: 8%;
                background-color: #d12217;
                overflow: hidden;
                border-radius: 18px;
                .swiper-container{
                    height: 30px;
                }
                #scroll-swiper-list{
                    display: inline-block;
                    width: 100%;
                    height: 30px;
                    list-style: none;
                    text-align: center;
                    line-height: 34px;
                    color: #fff;
                    a{
                        color: #fff;
                        display: inline-block;
                        text-decoration: none;
                    }
                }
            }
        }
        #code-wraper{
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 99;
            background-color: rgba(0,0,0,0.6);
            transform:translate(0%,0%) scale(1, 1);
            .close{
                width: 60px;
                position: fixed;
                right: 8%;
                top: 150px;
            }
            .code-container{
                width: 80%;
                padding: 30px;
                padding-top: 50px;
                box-sizing: border-box;
                position: fixed;
                top: 250px;
                left: 10%;
                background-color: #fff;
                border-radius: 20px;
                overflow: hidden;
                input{
                    width: 45%;
                    text-align: center;
                    font-size: 34px;
                    padding: 10px 0;
                    color: #ff4102;
                    margin-left: 10%;
                    border: 2px solid #ccc;
                    border-radius: 8px;
                }
                /*div{*/
                    /*margin-top: 20px;*/
                    /*margin-bottom: 30px;*/
                    /*width: 100%;*/
                    /*height: 2px;*/
                    /*background-color: #ccc;*/
                /*}*/
                .change{
                    width: 120px;
                    height: 40px;
                    /*border: 2px solid red;*/
                    display: inline-block;
                    position: absolute;
                    left: 65%;
                    top: 65px;
                    span{
                        color: #333;
                        font-size: 26px;
                        position: absolute;
                        top: 0;
                        left: 0;
                    }
                    img{
                        width: 34px;
                        position: absolute;
                        top: 0;
                        right: 0;
                        margin: 0;
                    }
                }
                .next{
                    width: 80%;
                    margin-top: 20px;
                    margin-left: 10%;
                    margin-bottom: 20px;
                    background-color: #ff4102;
                    text-align: center;
                    height: 80px;
                    line-height: 86px;
                    font-size: 36px;
                    color: #fff;
                    border-radius: 10px;
                    overflow: hidden;
                }
                img{
                    text-align: center;
                    width: 40%;
                    margin-left: 30%;
                    margin-top: 30px;
                    /*position: absolute;*/
                    /*top: 50px;*/
                    /*left: 42%;*/
                }
                span{

                    img{
                        width: 40px;
                    }
                }
            }
        }
    }
    .success-container {
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .5);
        color: #333;
        z-index: 99999;
        transform: translate(0%, 0%) scale(1, 1);
        #close {
            width: 60px;
            position: fixed;
            right: 12%;
            top: 400px;
            z-index: 10000000;
        }
        .success-body {
            width: 90%;
            img {
                width: 92%;
                position: fixed;
                left: 4%;
                top: 160px;
            }
            div {
                width: 70%;
                position: fixed;
                left: 14%;
                top: 650px;
                font-size: 30px;
                color: #fff;
                text-align: center;
            }
            p{
                width: 40%;
                height: 60px;
                padding: 10px;
                border-radius: 10px;
                background-color: #ff4102;
                line-height: 64px;
                text-align: center;
                color: #fff;
                font-size: 34px;
            }
            .address{
                position: fixed;
                top: 810px;
                left: 29%;
            }
            .get{
                position: fixed;
                top: 920px;
                left: 29%;
                a{
                    display: inline-block;
                    text-decoration: none;
                    color: #fff;
                    width: 100%;
                }
            }
        }
    }
</style>
<style scoped>
    #banner-wraper #banner-pagination .swiper-pagination-bullet-active{
        background: white;
        opacity: 1;
    }
    .swiper-pagination-bullet {
        width: 20px;
        height: 3px;
        display: inline-block;
        border-radius: 0;
        background: #fff;
        opacity: 0.4;
    }
</style>